/**
 * Created by Administrator on 2018-08-14.
 * 停场过夜分析
 */

define(function (require,exports,module) {
    var sTpl = require("./aogOvernight.html");
    require("./aogOvernight.css");
    require("../../../lib/echarts.min.js");
    var VueComponent = Vue.extend({
        template: sTpl,
        data:function () {

            return {
                aogonRatioData:[{
                    flightNum:'CH2576',
                    time:'42 h 23 m'
                },
                    {
                        flightNum:'CH2576',
                        time:'42 h 23 m'
                    },{
                        flightNum:'CH2576',
                        time:'42 h 23 m'
                    },{
                        flightNum:'CH2576',
                        time:'42 h 23 m'
                    },{
                        flightNum:'CH2576',
                        time:'42 h 23 m'
                    },{
                        flightNum:'CH2576',
                        time:'42 h 23 m'
                    }
                ]

            }
        },
        methods: {

            /*停场过夜时长分布*/
            aogonTime: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('aogonTime'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '停场过夜时长分布',
                        x:'left',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['0-12小时', '12-24小时', '24-36小时', '48小时以上'],
                        boundaryGap: true,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#6995aa'
                            },
                            onZero: true
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#A5CADB'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                                color: '#1978D9'
                            }
                        },
                    },
                    yAxis: {
                        name:'架次',
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#6995aa'
                            },
                            onZero: false
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#A5CADB'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#1978D9'
                            }
                        },

                    },
                    grid: {
                        left: '4%',
                        right: '0',
                        top: '25%',
                        bottom: '1%',
                        containLabel: true
                    },
                    series: [{
                        data: [5,6,7,3],
                        type: 'line',
                        smooth: true,
                        symbolSize: 5,
                        symbol: 'circle',
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function(params) {
                                        return dataValue - params.value;
                                    },
                                    fontSize: 40,
                                    padding: [90, 0, 0, 0],
                                    color: '#fff',
                                    textStyle: {
                                        baseline: 'top'
                                    }
                                },
                                color: '#01f2ee',
                                borderColor: 'rgba(1, 242, 238, 0.5)',
                                borderWidth: 10
                            }
                        }
                    }]
                });
            },
            /*停场过夜原因分析*/
            aogonCause: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('aogonCause'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '停场过夜原因分析',
                        x:'left',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    color:['#9bc608','#ef5b5b','#00d8da','#8661aa','#ffbd00','#c85567'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name:'原因类型',
                            type:'pie',
                            radius : [30, 110],
                            center : ['50%', '50%'],
                            roseType : 'area',
                            data: [
                                {value: 5, name: '原因1'},
                                {value: 7, name: '原因2'},
                                {value: 9, name: '原因3'},
                                {value: 2, name: '原因4'},
                                {value: 3, name: '原因5'}
                            ]
                        }
                    ]
                });
            },
            /*停场过夜机型分析*/
            aogonAirType: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('aogonAirType'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '停场过夜机型分析',
                        x:'left',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    color:['#9bc608','#ef5b5b','#00d8da','#8661aa','#ffbd00','#c85567'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name:'机型',
                            type:'pie',
                            radius : [30, 110],
                            center : ['50%', '50%'],
                            roseType : 'area',
                            data: [
                                {value: 1, name: '机型1'},
                                {value: 2, name: '机型2'},
                                {value: 4, name: '机型3'},
                                {value: 2, name: '机型4'},
                                {value: 1, name: '机型5'},
                                {value: 3, name: '机型6'}
                            ]
                        }
                    ]
                });
            }
        },
        mounted:function() {
            this.$nextTick(function () {
                this.aogonCause();
                this.aogonTime();
                this.aogonAirType();
            }.bind(this));

        },
        watch:{
        },
        computed:{

        },
        activated:function () {
            messages.$emit('change','停场过夜分析');
        }
    })
    module.exports=VueComponent;
    module.exports.reDefine=function (val) {
        module.exports.type=val;
        return module.exports;
    }

})


